<template>
    <div >
        <div class="list">
            <div class="item" v-for="(item,index) in jcReportData" :key="index">
                <div class="item-top" @click="item.isShow=!item.isShow">
                    <div class="fl">
                        <p><span>报告日期：</span>{{item.bgsj}}</p>
                        <p><span>影像号：</span>{{item.yxh}}</p>
                        <p><span>检查名称：</span>{{item.jcmc}}</p>
                    </div>
                    <div class="fr" >
                        <img src="../assets/images/arrow-down.png" alt="" v-show="!item.isShow">
                        <img src="../assets/images/arrow-up.png" alt="" v-show="item.isShow">
                    </div>
                </div>
                <div class="item-detail" v-show="item.isShow">

                    <div class="induction"v-show="item.bt01!=' '">
                        <div class="title">
                            <img src="../assets/images/yingxiang.png" alt="">{{item.bt01}}
                        </div>

                        <div class="text">
                            {{item.nr01}}
                        </div>
                    </div>
                    <div class="biaoxian"  v-show="item.bt02!=' '">
                        <div class="title">
                            <span></span>{{item.bt02}}
                        </div>
                        <div class="text">
                            {{item.nr02}}
                        </div>
                    </div>
                    <div class="biaoxian"  v-show="item.bt03!=' '">
                        <div class="title">
                            <span></span>{{item.bt03}}
                        </div>
                        <div class="text">
                            {{item.nr03}}
                        </div>
                    </div>
                    <div class="biaoxian"  v-show="item.bt04!=' '">
                        <div class="title">
                            <span></span>{{item.bt04}}
                        </div>
                        <div class="text">
                            {{item.nr04}}
                        </div>
                    </div>
                    <div class="biaoxian"  v-show="item.bt05!=' '">
                        <div class="title">
                            <span></span>{{item.bt05}}
                        </div>
                        <div class="text">
                            {{item.nr05}}
                        </div>
                    </div>
                    <div class="biaoxian"  v-show="item.bt06!=' '">
                        <div class="title">
                            <span></span>{{item.bt06}}
                        </div>
                        <div class="text">
                            {{item.nr06}}
                        </div>
                    </div>
                    <div class="biaoxian"  v-show="item.bt07!=' '">
                        <div class="title">
                            <span></span>{{item.bt07}}
                        </div>
                        <div class="text">
                            {{item.nr07}}
                        </div>
                    </div>
                    <div class="biaoxian"  v-show="item.bt08!=' '">
                        <div class="title">
                            <span></span>{{item.bt08}}
                        </div>
                        <div class="text">
                            {{item.nr08}}
                        </div>
                    </div>
                    <div class="biaoxian" v-show="item.bt09!=' '">
                        <div class="title">
                            <span></span>{{item.bt09}}
                        </div>
                        <div class="text">
                            {{item.nr09}}
                        </div>
                    </div>
                    <div class="biaoxian"  v-show="item.bt10!=' '">
                        <div class="title">
                            <span></span>{{item.bt10}}
                        </div>
                        <div class="text">
                            {{item.nr10}}
                        </div>
                    </div>
                    <div class="biaoxian" v-show="item.bt11!=' '">
                        <div class="title">
                            <span></span>{{item.bt11}}
                        </div>
                        <div class="text">
                            {{item.nr11}}
                        </div>
                    </div>
                    <div class="biaoxian"  v-show="item.bt12!=' '">
                        <div class="title">
                            <span></span>{{item.bt12}}
                        </div>
                        <div class="text">
                            {{item.nr12}}
                        </div>
                    </div>
                    <div class="biaoxian" v-show="item.bt13!=' '">
                        <div class="title">
                            <span></span>{{item.bt13}}
                        </div>
                        <div class="text">
                            {{item.nr13}}
                        </div>
                    </div>
                    <div class="biaoxian" v-show="item.bt14!=' '">
                        <div class="title">
                            <span></span>{{item.bt14}}
                        </div>
                        <div class="text">
                            {{item.nr14}}
                        </div>
                    </div>
                    <div class="biaoxian" v-show="item.bt15!=' '">
                        <div class="title">
                            <span></span>{{item.bt15}}
                        </div>
                        <div class="text">
                            {{item.nr15}}
                        </div>
                    </div>

                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
    import {getZYRISReportApi, getRISReportApi} from '@/api/healthRecords'
export default {
    name: 'jcReport',
    data () {
        return {
            msg: 'Welcome to Your Vue.js App',
            jcReportData:[]
        }
    },
    props:['listData'],
    created(){
        if (this.listData.name == "Zyxx") {
            this.getZYRISReport();
        }else {
            this.getRISReport();
        }
    },
    methods: {
        //_1门诊检查报告信息
        getRISReport() {
            getRISReportApi(JSON.stringify(this.listData)).then(response => {
                if (response.data.code == 1) {
                    response.data.data.forEach(item => {
                        item.isShow = false;
                    });
                    this.jcReportData = response.data.data
                }
             })
        },
        //_2住院检查报告信息
        getZYRISReport() {
            getZYRISReportApi(JSON.stringify(this.listData)).then(response => {
                if (response.data.code == 1) {
                    response.data.data.forEach(item => {
                        item.isShow = false;
                    });
                    this.jcReportData = response.data.data
                }
            })
        },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.fl{
    float: left;
}
.fr{
    float: right;
}
.list{
    .item{
        padding-bottom: 0;
        .fl {
            width: 90%;
        }
        .fr{
            width: 10%;
            padding-top: 2rem;
            img {
                width: 1.3rem;
            }
        }
        .item-top {
            overflow: hidden;
            zoom: 1;
            padding: 1rem 2rem;
            border-bottom: #eee solid 1px;
            padding-right: 1rem;
            padding-bottom: 0;
            p {
                font-size: 1rem;
                color: #333;
                margin-bottom: 1rem;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                span {
                    display: inline-block;
                    width: 5.5rem;
                    text-align: justify;
                    color: #969696;
                }
            }
        }
        .item-detail {
            padding: 1rem 2rem;
            border-bottom: #eee solid 1px;
            .induction {
                background: #EEF9FD;
                border: dashed #0CB7F5 1px;
                border-radius: 0.3rem;
                padding: 0.6rem;
            }
            .title {
                color: #009CDF;
                font-size: 1rem;
                margin-bottom: 0.5rem;
                span {
                    display: inline-block;
                    width: 0.3rem;
                    height: 1rem;
                    vertical-align: middle;
                    background: linear-gradient(0deg, rgba(47, 152, 240, 1), rgba(99, 217, 245, 1));
                    margin-right: 0.5rem;
                }
            }
            .text {
                font-size: 1rem;
                color: #333;
                line-height: 2rem;
            }
            img {
                width: 1rem;
                vertical-align: middle;
                margin-right: 0.5rem;
            }
            .biaoxian {
                margin-top: 1rem;
            }
        }
    }
}
</style>
